<template>
    <div>
        <section class="home-wrapper">
            <div class="login-body">
                <div class="box">
                    <article class="box-aw box-flex">
                        <el-form ref="form" :rules="formrules" :model="form">
                            <el-form-item>
                                <el-radio-group v-model="form.u_type">
                                    <el-radio :label="1">个人账号</el-radio>
                                    <el-radio :label="2">企业账号</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="u_phone">
                                <el-input v-model="form.u_phone" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                            <el-form-item prop="u_email">
                                <el-input v-model="form.u_email" placeholder="请输入邮箱地址"></el-input>
                            </el-form-item>
                            <el-form-item prop="u_nickname">
                                <el-input v-model="form.u_nickname" placeholder="请输入昵称，至少2个字符，至多6个"></el-input>
                            </el-form-item>
                            <el-form-item prop="u_password">
                                <el-input type="password" v-model="form.u_password" placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-form-item prop="confirm_password">
                                <el-input type="password" v-model="form.confirm_password" placeholder="请再次输入密码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-radio-group v-model="form.u_sex">
                                    <el-radio :label="1">男</el-radio>
                                    <el-radio :label="2">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <div class="box clearfix">
                                <div class="dxcode box-flex fl">
                                    <el-form-item prop="verify">
                                        <el-input v-model="form.verify" placeholder="请输入验证码"></el-input>
                                    </el-form-item>
                                </div>
                                <img src="/api/index/login/verify" onclick="this.src='/api/index/login/verify'" height="40" alt="验证码" v-if="isrefresh" class="piccode" />
                            </div>
                            <div class="box clearfix">
                                <div class="dxcode box-flex fl">
                                    <el-form-item prop="u_email_code">
                                        <el-input v-model="form.u_email_code" placeholder="请输入邮箱验证码"></el-input>
                                    </el-form-item>
                                </div>
                                <el-button type="primary" class="dxcodebtn fr" @click="getmcode" style="height: 40px;">获取验证码</el-button>
                            </div>

                            <div class="form-item clearfix">
                                <el-checkbox v-model="checked" class="fl">已阅读并同意<router-link to="/rules">服务条款</router-link></el-checkbox>
                            </div>
                            <el-button type="primary" class="login-btn" @click="registerFun('form')">注册</el-button>
                        </el-form>
                    </article>
                    <div class="box-fr">
                        <p>已经注册过？</p>
                        <router-link to="/login" class="goregister maincolor">直接登录</router-link>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    import '../../assets/css/home.css';
    import {isvalidPhone,checkEmail} from '../../assets/js/validate.js'


    var validPhone=(rule, value,callback)=>{
        if (!value){
            callback(new Error('请输入手机号码'))
        }else  if (!isvalidPhone(value)){
            callback(new Error('请输入正确的11位手机号码'))
        }else {
            callback()
        }
    }

    export default {
        data(){
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.form.confirm_password !== '') {
                        this.$refs.form.validateField('confirm_password');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.u_password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                form: {
                    u_phone: '',
                    u_password: '',
                    confirm_password: '',
                    u_email: '',
                    u_email_code: '',
                    verify: '',
                    u_nickname: '',
                    u_sex: 1,
                    u_type: 1,
                },
                formrules: {
                    u_phone: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                        { required: true, trigger: 'blur', validator: validPhone },
                    ],
                    u_email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    u_nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                    ],
                    u_password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    confirm_password: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    verify: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ],
                    u_email_code: [
                        { required: true, message: '请输入邮箱验证码', trigger: 'blur' }
                    ],
                },
                checked: false,  //同意服务条款
                isrefresh: true,  //刷新验证码
            }
        },
        methods: {
            //获取邮箱验证码
            getmcode(){

                var _this = this;
                
                if(!_this.form.u_email){
                    this.$message({
                        message: '请先输入邮箱地址',
                        type: 'warning'
                    });
                }else{
                    if(checkEmail(_this.form.u_email)){

                        this.$httpPost('/api/index/mail/email',{
                            'u_email': _this.form.u_email,
                            'type': 1,  //1注册账号   2找回密码
                        }).then(response => {
                            
                            if(response.code == 200){
                                
                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });

                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        })

                    }
                }
                
            },
            //注册
            registerFun(formName){

                var _this = this;

                _this.isrefresh = false;
                _this.$nextTick(()=>{
                    _this.isrefresh = true;
                });

                _this.$refs[formName].validate((valid) => {
                    if (valid) {

                        if(_this.checked){

                            this.$httpPost('/api/index/login/register',_this.form).then(response => {
                                
                                if(response.code == 200){
                                    
                                    this.$message({
                                        message: response.msg,
                                        type: 'success'
                                    });

                                    setTimeout(function(){
                                        _this.$router.push({'path': '/login'})
                                    },2000)

                                }else{
                                    this.$message({
                                        message: response.msg,
                                        type: 'warning'
                                    });
                                }

                            })
                        }else{
                            this.$message({
                                message: '请勾选服务条款',
                                type: 'info'
                            });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
        },
        mounted(){
            
        },
    }
</script>
